<template>
    <div class="DiagnosticStatistics">
        <div class="container">
            <el-card id="faultType" class="pie-class"></el-card>
            <el-card id="faultDevice" class="pie-class"></el-card>
            <el-card id="starStatistics" class="category-class"></el-card>
        </div>
    </div>
</template>

<script>
import * as queryLogApi from "@/api/querylog";
import * as echarts from "echarts";
import { userFeedbackStatistics } from "../../api";

export default {
    name: "DiagnosticStatistics",
    async mounted() {
        const res = await queryLogApi.get();
        if (res.data.code === 1) {
            this.$message.error(res.data.msg);
            return;
        }

        const res1 = await userFeedbackStatistics("/feedback/statistics");
        const { month, week, year } = res1.data.data;

        // 3.基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("faultType"));
        var myChart2 = echarts.init(document.getElementById("faultDevice"));
        var myChart3 = echarts.init(document.getElementById("starStatistics"));

        // 4.指定图表的配置项和数据
        var option1 = {
            title: {
                text: "故障类型",
            },
            series: [
                {
                    name: "分布",
                    type: "pie",
                    radius: ["50%", "70%"],
                    label: {
                        normal: {
                            position: "top",
                            formatter: "{b} \n {d}%", //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                        },
                    },
                    data: transformKV2ValueName(res.data.data.faultType),
                    color: transformKV2ValueName(res.data.data.faultType).map(
                        (item) => stringToColorCode(item.name)
                    ),
                },
            ],
        };
        var option2 = {
            title: {
                text: "故障设备",
            },
            series: [
                {
                    name: "分布",
                    type: "pie",
                    radius: ["50%", "70%"],
                    label: {
                        normal: {
                            position: "top",
                            formatter: "{b} \n {d}%", //百分比显示，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                        },
                    },
                    data: transformKV2ValueName(res.data.data.faultDevice),
                    color: transformKV2ValueName(res.data.data.faultDevice).map(
                        (item) => stringToColorCode(item.name)
                    ),
                },
            ],
        };

        var option3 = {
            legend: {},
            tooltip: {},
            title: {
                text: "用户满意度统计",
            },
            dataset: {
                dimensions: [
                    "product",
                    "0分",
                    "1分",
                    "2分",
                    "3分",
                    "4分",
                    "5分",
                ],
                source: transformUserStar([month, week, year]),
            },
            xAxis: { type: "category" },
            yAxis: {},
            series: [
                { type: "bar", barWidth: 40 },
                { type: "bar", barWidth: 40 },
                { type: "bar", barWidth: 40 },
                { type: "bar", barWidth: 40 },
                { type: "bar", barWidth: 40 },
                { type: "bar", barWidth: 40 },
            ],
        };

        // 5.使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart1.resize();
        myChart2.resize();
        myChart3.resize();
    },
};

function stringToColorCode(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
    }
    let color = "#";
    for (let i = 0; i < 3; i++) {
        let value = (hash >> (i * 6)) & 0xff;
        color += ("00" + value.toString(16)).substr(-2);
    }
    return color;
}
function transformKV2ValueName(data) {
    return data.map((item) => {
        const key = Object.keys(item)[0]; // 获取对象的键
        const value = item[key]; // 获取对象的值
        return { value, name: key }; // 返回转换后的对象
    });
}

function transformUserStar(data) {
    return data.map((item, index) => {
        let obj = {};
        if (index === 0) {
            obj.product = "本周";
        } else if (index === 1) {
            obj.product = "本月";
        } else if (index === 2) {
            obj.product = "本年";
        }
        for (let i = 0; i < item.length; i++) {
            obj[`${i}分`] = item[i] / 100;
        }
        return obj;
    });
}
</script>

<style lang='less'>
.DiagnosticStatistics {
    overflow-x: auto;

    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .pie-class {
        width: 42vw;
        height: 42vh;
        padding: 10px;
        box-sizing: border-box;
    }

    .category-class {
        width: 84vw;
        height: 42vh;
        padding: 10px;
        display: flex;
        justify-content: center;
    }
}
</style>